<script setup>
import {usePreviewVideoStore} from "@/stores/previewVideoStore.js";
import {ref} from "vue";

const videoRef = ref(null)
const previewVideoStore = usePreviewVideoStore();
let closeVideoPath = null
let closeZipVideoPath = null

function open() {
  if(closeVideoPath !== previewVideoStore.absolutePath || closeZipVideoPath !== previewVideoStore.fileName) {
    videoRef.value.load()
  }
  videoRef.value.play()
}

function onDialogClose() {
  videoRef.value.pause()
  closeVideoPath = previewVideoStore.absolutePath
  closeZipVideoPath = previewVideoStore.fileName
  previewVideoStore.fileName = null
}
</script>

<template>
  <el-dialog
      v-model="previewVideoStore.show"
      @close="onDialogClose()"
      @open="open()"
      :close-on-press-escape="true"
      :title="previewVideoStore.title"
  >
    <video ref="videoRef" style="width: 100%; height: 100%" controls>
      <source :src="previewVideoStore.video()">
    </video>
  </el-dialog>
</template>

<style scoped>

</style>